<!--
*@Author: QWP
*@Description: 
*@Date: 2024-07-29 16:39:56
-->
<template>
  <div ref="chartRef" style="width: 100%; height: 200px;cursor: pointer"></div>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, useAttrs, watch } from 'vue'

import { useRoute, useRouter } from 'vue-router'
import * as echarts from 'echarts'
import dayjs from 'dayjs';
import * as sumWarningApi from '@/service/emergency/sumWarning'
import { numberC } from '@/util/common';
const attrs = useAttrs()
onMounted(async () => {
  await getSerch()
  initCharts()
})

const emits = defineEmits(['click'])
const chartDataResult = ref([])
// 请求预警统计信息
const getSerch = async () => {
  // //日期统计
  chartDataResult.value = []
  const result = await sumWarningApi.getWarnDete(attrs.mineId)
  if (result.code == 0) {
    chartDataResult.value = result.data
    chartDataResult.value.map(e => {
      e.MONTH = dayjs(e.MONTH).format('M')
    })
  }
}

// 图表
const chartData = ref<any[]>([])
let arrList = ref([])
const chartRef = ref<HTMLElement>()
const initCharts = () => {
  chartData.value = []
  let nowMounth = dayjs().format('M');
  let levels = ['一级', '二级', '三级', '四级'];
  let months = [];
  for (let i = 1;i <= nowMounth;i++) {
    months.push(i)
  }

  levels.forEach(item => {
    arrList.value = []
    months.forEach(index => {
      let filermonth = chartDataResult.value.filter(i => i.MONTH == index.toString());
      let fileLeve = [0, ...filermonth.filter(i => i.WARN_LEVEL == item).map(i => i.COUNT)].reduce((a, b) => numberC(a) + numberC(b))
      arrList.value.push(fileLeve)
    })
    chartData.value.push({
      name: item, type: 'line', data: arrList.value
    })
  })



  var myChart = echarts.init(chartRef.value);

  const option = {
    color: ["#FF4D4F", "#FF8940", "#FAB410", "#1890FF"],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: levels,
      right: 0,
      itemGap: 20,
      top: '10%',
      orient: 'vertical'
    },
    grid: {
      top: '10',
      left: '3%',
      right: '90',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: months.map(i => i + '月')
    },
    yAxis: {
      type: 'value'
    },
    series: chartData.value
  };

  option && myChart.setOption(option);

  window.addEventListener('resize', () => {
    setTimeout(() => {
      myChart.resize()
    }, 100)
  })
  myChart.on('click', () => emits('click'))
}

watch(() => attrs.show, async (nval, oval) => {
  if(nval == true) {
    await getSerch()
    initCharts()
  }
})
</script>

<style lang='scss' scoped></style>